<template>
  <div class="artlist-container">我是ArtList组件</div>
</template>

<script>
export default {
  // created() {
  //   abc(); //调用abc函数,abc函数之前没有被定义过,
  // },
  //第一个钩子函数
  beforeCreate() {
    console.log("子-beforeCreate", this.age);
  },
  //第二个钩子函数
  created() {
    console.log("子-created", this.age);
  },
  //第三个钩子函数
  beforeMount() {
    console.log("子-beforeMount", this.$refs.h2);
  },
  //第四个钩子函数
  mounted() {
    console.log("子-mounted", this.$refs.h2);
  },
  //第五个钩子函数
  beforeUpdate() {
    console.log("子-beforeUpdate", this.age, this.$refs.p.innerHTML);
  },
  //第六个钩子函数
  updated() {
    console.log("子-updated", this.age, this.$refs.p.innerHTML);
  },
  // 7. beforeDestroy
  beforeDestroy() {
    console.log("子-beforeDestroy");
    // console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  },
  // 8. destroyed
  destroyed() {
    console.log("子-destroyed");
    // console.log(this.$refs.artlistRef); // 这里的artlistRef 是 子组件的ref
  },
};
</script>

<style lang="less" scoped>
.artlist-container {
  background-color: pink;
  margin: 5px;
  padding: 10px;
}
</style>
